<template>
    <div class="card">
        <el-card shadow="hover" @click="goDetail">
            <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                style="width: 100%" /> -->
            <div class="left">
                <div class="top">{{ props.hospitalInfo.hosname }}</div>
                <div class="bottom">
                    <div class="dj"><el-icon style="width: 30px;">
                            <OfficeBuilding />
                        </el-icon>{{ props.hospitalInfo.param.hostypeString }}</div>
                    <div class="time"><el-icon>
                            <Timer />
                        </el-icon>每天{{ props.hospitalInfo.bookingRule.releaseTime }}放号</div>
                </div>
            </div>
            <div class="right">
                <img :src="`data:image/jpeg;base64,${props.hospitalInfo.logoData}`" alt="">
            </div>
        </el-card>
    </div>
</template>
<script setup lang='ts'>
import { useRouter } from 'vue-router';
//创建路由对象
let $router = useRouter();
//接受父组件传递过来的props->即为已有的医院数据
let props = defineProps(['hospitalInfo'])
const goDetail = (item: any) => {
    console.log(item);
    //点击进入详情页
    $router.push({ path: '/hospital/register',query:{hoscode:props.hospitalInfo.hoscode} })
}

</script>
<style scoped lang='scss'>
.left {
    float: left;
    width: 300px;
    height: 80px;

    .top {
        width: auto;
    }

    .bottom {
        height: 20px;
        margin-top: 20px;
        font-size: 14px;

        .dj {
            float: left;
        }

        .time {
            float: left;
            margin-left: 100px;
        }
    }
}

.right {
    float: right;
    width: 80px;
    height: 80px;
    margin-top: -10px;
}
</style>